import React, {Component} from 'react';
import PropTypes from 'prop-types';

const TodoActions = require('../../actions/TodoActions');

class TodoList extends Component {

  constructor(props) {
    super(props);
    this._checkboxChange = this._checkboxChange.bind(this);
    this._delete = this._delete.bind(this);
    this._editor = this._editor.bind(this);
  }

  static propTypes = {
    text: PropTypes.string,
    defaultChecked: PropTypes.bool,
    index: PropTypes.number
  }

  static defaultProps = {

  }

  _delete(event) {
    TodoActions._delete(event.target.getAttribute('data-index'));
  }

  _editor(event) {
    let id = event.target.getAttribute('data-index');
    let name = prompt('请输入内容', this.props.text);

    if (name != '' && name != null && name != this.props.text) {
      TodoActions._editor(id, name);
    }
  }

  _checkboxChange(event) {
    event.preventDefault();
    let id = event.target.getAttribute('data-index');
    TodoActions._stateChange(id);
  }

  render() {

    return (
      <p>
        <input
          type = "checkbox"
          data-index = {this.props.index}
          defaultChecked = {this.props.defaultChecked}
          onClick={this._checkboxChange}
        />
        {this.props.text}
        <button
          onClick = {this._delete}
          data-index = {this.props.index}>
          delete
        </button>
        <button
          onClick = {this._editor}
          data-index = {this.props.index}>
          editor
        </button>
      </p>
    );
  }
}


export default TodoList;
